<template>
  <div class="header">
    <div class="icon">
      <el-icon :size="30" color="#0000ff" @click="toggleAside">
        <Expand v-show="isShow" />
        <Fold v-show="!isShow" />
      </el-icon>
    </div>
    <div>其他内容</div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
// 引入store
import { useHomeStore } from "@/stores/home";
import { storeToRefs } from "pinia";
const homeStore = useHomeStore();
const { homeData, isShow } = storeToRefs(homeStore);
// 侧边展开收起
const toggleAside = () => {
  homeStore.changeIsShow();
};
onMounted(() => {});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  /* background-color: aquamarine; */
  .icon{
    //鼠标样式
    cursor: pointer;
    margin-right: 20px;
  }
}
</style>
